CSS
Le CSS (pour Cascading Style Sheets, ou feuilles de style en cascade) est un langage de mise en forme permettant d'habiller les contenus HTML d'une page web.
HTML affiche et structure les données, CSS les met en forme (positions, couleurs, polices, etc...)
CSS, tout comme HTML est standardisé par le W3C
CSS est actuellement en version 3
Commentaires CSS
/* Commentaire CSS */
Intégrer du CSS dans une page web
Il existe 3 manières différentes d'écrire du CSS dans une page web avec chacune leurs avantages et inconvénients :
-
La première méthode qui est aussi la plus courante est de créer un fichier ".css" avec les styles CSS écrits dedans puis d'inclure ce fichier dans le
<head></head>de la page web :/* styles.css */ h1{ color: red; }<!-- index.html --> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Ce titre est rouge ! --> <h1>Test</h1> </body>Avantages de cette méthode :
- Séparation du code CSS et du code HTML, donc on s'y retrouve plus facilement.
- Le fichier CSS peut être mis en cache par le navigateur et être ainsi téléchargé qu'une seule fois à la première visite sur le site.
Inconvénient de cette méthode :
- Impossible d'écrire autre chose que du CSS dans un fichier CSS, ce qui peut poser des problèmes dans certains cas quand on souhaite générer des styles avec un langage backend comme PHP par exemple.
-
La deuxième méthode consiste à écrire les styles CSS dans une balise
<style></style>dans le<head></head>de la page HTML :<!-- index.html --> <head> <style> h1{ color: red; } </style> </head> <body> <!-- Ce titre est rouge ! --> <h1>Test</h1> </body>Avantages de cette méthode :
- Plus rapide que de créer un fichier .css à part, ça permet d'aller plus vite pour faire des tests par exemple (ATTENTION on évite autant que possible d'utiliser cette méthode sur un vrai site quand même !).
- Cette méthode permet à un langage backend (type PHP) de pouvoir générer du code CSS.
Inconvénients de cette méthode :
- Le CSS n'étant pas dans un fichier .css à part, il ne peut pas être mis en cache par le navigateur et être ainsi téléchargé qu'une seule fois à la première visite sur le site (alourdissement du chargement de la page).
- La séparation du code CSS et du code HTML est moins net par rapport à la première méthode, il est plus difficile de s'y retrouver.
-
La troisième méthode consiste à écrire les styles directement sur l'élément HTML, dans un attribut "style" :
<!-- Ce titre est rouge ! --> <h1 style="color: red;">Test</h1>Avantages de cette méthode :
- Le langage Javascript a besoin de cette méthode pour appliquer du CSS en temps réel sur un élément (cette méthode existe principalement pour cette raison !).
- Plus rapide que de créer un fichier .css à part, ça permet d'aller plus vite pour faire des tests par exemple (ATTENTION on évite autant que possible d'utiliser cette méthode sur un vrai site quand même !)
- Cette méthode permet à un langage backend (type PHP) de pouvoir générer du code CSS.
Inconvénients de cette méthode :
- Le CSS n'étant pas dans un fichier .css à part, il ne peut pas être mis en cache par le navigateur et être ainsi téléchargé qu'une seule fois à la première visite sur le site (alourdissement du chargement de la page).
- Il n'y a pas de séparation du code entre CSS et HTML, il est beaucoup plus difficile de s'y retrouver.
Priorités des styles CSS
Si CSS contient le terme "cascading", c'est pour signifier que les styles d'un élément HTML peuvent être définis plusieurs fois et qu'il y aura forcément un style qui "écrasera" les autres (on parle de surcharge).
Les styles sont priorisés dans cet ordre (du plus fort au moins fort) :
- Styles définis via l'inspecteur d'élément
- Styles intégrés sur l'élément via l'attribut "style"
- Styles intégrés via un fichier .css inclus ou une balise
<style></style>dans le head - Styles par défaut du navigateur
Par exemple, si un titre est définit en couleur rouge dans un fichier .css mais en couleur bleu sur l'élément directement avec l'attribut "style", alors le titre sera bleu car ce style sera prioritaire selon l'ordre des priorités.